<template>
	<view class="side_bar">
		<view class="avatar">
			<u-avatar :src="avatar" size="60"></u-avatar>
			<u-icon class="avatar_icon" name="plus-circle-fill" size="20" color="#ea3323"></u-icon>
		</view>
		<u-icon name="heart-fill" size="40" :color="labelColor" :labelColor="labelColor" :label="like" labelPos="bottom"></u-icon>
		<u-icon name="star-fill" size="40" :color="labelColor":labelColor="labelColor" :label="likeN" labelPos="bottom"></u-icon>
		<u-icon name="chrome-circle-fill" size="40" :color="labelColor":labelColor="labelColor" :label="playNumber" labelPos="bottom"></u-icon>
		<u-icon name="chat-fill" size="40" :color="labelColor":labelColor="labelColor" :label="smsN" labelPos="bottom"></u-icon>
		<u-icon name="camera-fill" size="40" :color="labelColor":labelColor="labelColor" labelPos="bottom"></u-icon>
	</view>
</template>

<script>
	export default{
		name: "SideBar",
		data(){
			return {
				labelColor: "#f1f1f1",
				color: "#f1f1f1",
			}
		},
		props: {
			avatar:{
				type: String,
				requires: true
			},
			like: Number,
			likeN: Number,
			playNumber: Number,
			smsN: Number,
		}
	}
</script>

<style>
	.side_bar{
		height: 60%;
		width: 60px;
		padding: 4px 8px;
		/* background-color: rgba(0,0,0,.1); */
		position: absolute;
		right: 0;
		top: 45%;
		transform: translate(0,-25%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	.avatar{
		position: relative;
		margin-bottom: 10px;
	}
	.avatar_icon{
		position: absolute;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>